<template>
	<view class="scan size">
<!-- 		<u-navbar back-text="二维码扫描"></u-navbar> -->
		<view class="sectionview">
			<view id="qr-reader" style="width:100%;height:100%;"></view>
		</view>
		<view class="footer">
			<u-text :text="qrCodeMessage"></u-text>
			<u-button @click="getCameras" color="rgba(249, 185, 73, 1)">扫码</u-button>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>
<script>
	import {
		Html5QrCode,
		// Html5QrcodeScanner
	} from '@/node_modules/html5-qrcode'

	export default {
		data() {
			return {
				codeUrl: '',
				cameraId: '',
				qrCodeMessage: '112',
			};
		},
		mounted() {
			this.current = this.$route.query.current || 0;
			this.init();
		},
		beforeDestroy() {
			this.stop();
		},
		methods: {
			//返回结果
			getCode(id) {
				if (!id) return;
				//跳转页面
				// this.$u.route('/pages/selfInquiry/index', {
				// 	paraValue: id
				// });
				// this.$refs.uToast.show({
				// 	title: '扫码：{id}',
				// 	type: 'success'
				// });
			},
			init() {
				this.AddJs('../../node_modules/html5-qrcode/html5-qrcode.min.js');
				//需要加载时间建议延时一点再获取设备列表
				setTimeout(() => {
					this.getCameras();
				}, 1000);
			},
			stop() {
				this.html5QrCode
					.stop()
					.then(ignore => {
						// QR Code scanning is stopped.
						console.log('QR Code scanning stopped.');
					})
					.catch(err => {
						// Stop failed, handle it.
						console.log('Unable to stop scanning.');
					});
			},
			start() {
				this.html5QrCode = new Html5Qrcode('qr-reader');
				this.html5QrCode
					.start(
						this.cameraId, // retreived in the previous step.
						{
							fps: 10, // sets the framerate to 10 frame per second
							qrbox: 250 // sets only 250 X 250 region of viewfinder to
							// scannable, rest shaded.
						},
						qrCodeMessage => {
							// do something when code is read. For example:
							if (qrCodeMessage) {
								this.qrCodeMessage = qrCodeMessage;
								this.$refs.uToast.show({
									title: '扫码成功' + qrCodeMessage,
									type: 'success'
								});
								this.getCode(qrCodeMessage);
								this.stop();
							}
						},
						errorMessage => {
							// parse error, ideally ignore it. For example:
							// console.log(`QR Code no longer in front of camera.`);
						}
					)
					.catch(err => {
						// Start failed, handle it. For example,
						console.log(`Unable to start scanning, error: ${err}`);
						this.$refs.uToast.show({
							title: `扫码失败：${err}`,
							type: 'error'
						});
					});
			},
			getCameras() {
				Html5Qrcode.getCameras()
					.then(devices => {
						/**
						 * devices would be an array of objects of type:
						 * { id: "id", label: "label" }
						 */
						if (devices && devices.length) {
							if (devices.length > 1) {
								this.cameraId = devices[1].id;
							} else {
								this.cameraId = devices[0].id;
							}
							console.log(this.cameraId, 'cameraId');
							this.start();
						}
					})
					.catch(err => {
						this.$refs.uToast.show({
							title: '启用相机失败',
							type: 'error'
						});
					});
			},
			//动态创建script的方法
			AddJs(url) {
				console.log('url：', url);
				return new Promise((resolve, reject) => {
					const script = document.createElement('script');
					script.src = url;
					script.type = 'text/javascript';
					document.body.appendChild(script);
					script.onload = () => {
						resolve();
					};
				});
			}
		}
	};
</script>
<style lang="less">
	.scan {
		width: 100%;
		display: flex;
		flex-direction: column;
		height: 100vh;
		overflow: hidden;
		background-color: #585858;

		.footer {
			position: fixed;
			bottom: 50rpx;
			width: 100%;
			display: flex;
			justify-content: center;
		}
	}
</style>
